<!DOCTYPE html>
<html lang="zh-CN">

<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1,maximum-scale=1,minimum-scale=1">
    <title>见微-全媒体记者发稿助手</title>
    <!--font awesome-->
    <link rel="stylesheet" href="//cdn.bootcss.com/font-awesome/4.6.3/css/font-awesome.min.css">
    <!-- stylesheet -->
    <link href="//cdn.bootcss.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">
    <!--datepicker-->
    <!-- <link href="__PUBLIC__/datetimepicker/css/bootstrap-datetimepicker.min.css" rel="stylesheet"> -->
    <link href="__PUBLIC__/live/css/list-flow.css" rel="stylesheet">
    <link href="__PUBLIC__/live/css/jquery.autocomplete.css" rel="stylesheet">
    <!--jquery-->
    <script src="//cdn.bootcss.com/jquery/1.12.4/jquery.min.js"></script>
     <script src="__PUBLIC__/live/js/jquery-browser.js"></script>
    <script src="//cdn.bootcss.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
    <script src="//cdn.bootcss.com/moment.js/2.17.1/moment.min.js"></script>
    <script src="//cdn.bootcss.com/moment.js/2.17.1/locale/zh-cn.js"></script>
    <!-- <script src="__PUBLIC__/datetimepicker/js/bootstrap-datetimepicker.min.js"></script> -->
    <link href="__PUBLIC__/datetimepicker/css/bootstrap-datetimepicker.min.css" rel="stylesheet"> 
    <script src="__PUBLIC__/datetimepicker/js/bootstrap-datetimepicker.min.js"></script>
    <script src="__PUBLIC__/datetimepicker/js/locales/bootstrap-datetimepicker.zh-CN.js"></script>
    <script src="__PUBLIC__/live/js/jquery.autocomplete.min.js"></script>
    <style type="text/css">
        .nav-tab a { color: #337ab7 !important; }
    </style>
</head>

<body>


<include file="Public:header" />

<div class="main-content">
    <div class="wrap">
        <ul class="nav-tab">
            <li>
                <a href="/Live">主页</a>
            </li>
            <li class="active">
                <span>云导播</span>
            </li>
        </ul>

        <div class="control-bar">
            <form action="{:U('live_list')}" method="get" id="sform">
            <div style="float:left;height: 34px;line-height: 34px;margin-left: -100px;">
                    <a href="javascript:void(0)" id="addLiveApply">添加直播</a>
                </div>
                <div class="channel">
                    <select class="form-control" name="channel">
                        <option value="">请选择频道</option>
                        <?php foreach($channelList as $val) { ?>
                        <option value="{$val['chid']}"<?php if($_GET['channel'] == $val['chid']) { ?>selected="selected"<?php } ?>>{$val['name']}</option>
                        <?php } ?>
                    </select>
                </div>
                <div class="date-choose">
                    <div class="date-item">
                        <div class='input-group date' id='datetimepicker1'>
                            <input type='text' class="form-control" name="start_time" value="{$Think.get.start_time}" />
                                <span class="input-group-addon">
                                    <span class="glyphicon glyphicon-calendar"></span>
                                </span>
                        </div>
                    </div>
                    <span class="date-text">至</span>
                    <div class="date-item">
                        <div class='input-group date' id='datetimepicker2'>
                            <input type='text' class="form-control" name="end_time" value="{$Think.get.end_time}" />
                                <span class="input-group-addon">
                                    <span class="glyphicon glyphicon-calendar"></span>
                                </span>
                        </div>
                    </div>
                </div>
                <div class="search">
                    <input type="text" id="searchInput" name="keyword" value="{$Think.get.keyword}" />
                    <button type="submit" class="fa fa-search" id="sbtn" style="border:none"></button>
                </div>
            </form>
        </div>
        <ul class="video-list">
            <?php foreach($liveList as $key => $val) { ?>
            <li class="list-item">
                <a href="{:U('liveInfo')}?group_id={$val['group_id']}" title="{$val['title']}">
                    <div class="img" style="background-image:url('<?php if($val['image_url']) { ?>{$val['image_url']}<?php } else { ?>__PUBLIC__/images/defaultpic.gif<?php } ?>?imageView2/2/w/249/h/140');"></div>
                    <div class="text">
                        <div class="title">
                            <switch name="val.group_status">
                                <case value="0"><span class="label label-info">已审核</span></case>
                                <case value="1"><span class="label label-danger">直播中</span></case>
                                <case value="2"><span class="label label-danger">直播中</span></case>
                                <case value="3"><span class="label label-default">回看</span></case>
                                <case value="4"><span class="label label-danger">测试中</span></case>
                            </switch>
                            {$val['title']}
                        </div>
                        <div class="live-info">[开始时间] {$val['start_time']|date='Y-m-d H:i',###}</div>
                        <!--<div class="live-info">[&nbsp;简&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;介&nbsp;] <?php echo mb_substr(trim(str_replace("&nbsp;","",strip_tags(htmlspecialchars_decode($val['intro'])))), 0, 224)?:'无'; ?></div>
                    --></div>
                    <!--<div class="tools">
                        <span class="sortBtn sortUp" title="点击上移" data-sort="{$val['pos_sort']}" data-id="{$val['group_id']}"> <i class="fa fa-sort-asc" aria-hidden="true"></i> </span>
                        <span class="sortBtn sortDown" title="点击下移" data-sort="{$val['pos_sort']}" data-id="{$val['group_id']}"> <i class="fa fa-sort-desc" aria-hidden="true"></i> </span>
                    </div>-->
                </a>
            </li>
            <?php } ?>
        </ul>
        <div class="navbar">
            {$pageshow}
        </div>
    </div>
</div>

<div class="modal fade" tabindex="-1" id="addLiveApplyModal" role="dialog" aria-labelledby="addLiveApply">
    <div class="modal-dialog" role="document">
        <div class="modal-content" style="padding:20px;">
            <form class="form-horizontal" method="post" action="{:U('add_live')}">
                <div class="form-group">
                    <label for="addLiveTitle" class="col-sm-2 control-label">直播标题</label>
                    <div class="col-sm-10">
                        <input type="text" name="addLiveTitle" class="form-control" id="addLiveTitle">
                    </div>
                </div>
                <div class="form-group">
                    <label for="addLiveUsers" class="col-sm-2 control-label">机位设置</label>
                    <input type="hidden" name="addLiveUsers" id="addLiveUsers">
                    <div class="col-sm-10">
                        <span id="AddLiveUserName"></span>
                       <button type="button" id="selectUser" class="btn btn-primary btn-xs">添加机位</button>
                    </div>
                </div>

                <div class="form-group">
                    <div class="col-sm-offset-2 col-sm-10">
                        <button type="button" id="sureAddLive" class="btn btn-danger">确定添加</button>
                    </div>
                </div>
            </form>
        </div>
    </div>
</div>

<div class="modal fade" tabindex="-1" id="selectUserModal" role="dialog" aria-labelledby="selectUser">
    <div class="modal-dialog" role="document">
        <div class="modal-content" style="padding:20px;">
            <form class="form-horizontal">
                <input type="hidden" id="tempUserId">
                <div class="form-group">
                    <label for="addLiveTitle" class="col-sm-3 control-label">输入记者名字</label>
                    <div class="col-sm-9">
                        <input id="keyword" class="form-control" />
                    </div>
                </div>
                <div class="form-group">
                    <div class="col-sm-offset-3 col-sm-9">
                        <button type="button" id="sureSelectUser" class="btn btn-danger">确定添加</button>
                    </div>
                </div>

            </form>
        </div>
    </div>
</div>

<script>
    $(function () {
    	$("#sureAddLive").click(function(){
            if($("[name=addLiveTitle]").val()=="" || $("[name=addLiveUsers]").val()==""){
                alert("请完整填写信息！");
            }else{
                $.ajax({
                    type:"post",
                    url:$('#addLiveApplyModal form').attr("action"),
                    dataType:"json",
                    async:false,
                    data:$('#addLiveApplyModal form').serialize(),
                    success:function(data){
                        if(data.status==1){
                            alert(data.info);
                            location.href=data.url;
                        }else{
                            alert(data.info);
                        }
                    }
                })
            }
        })

        $("#addLiveApply").click(function(){
            $('#addLiveApplyModal').modal('show')
        })

        $("#selectUser").click(function(){
            $('#selectUserModal').modal('show')
        })

        var data = [
            <volist name="reporter" id="vo">
            {name: "{$vo.realname}",py:"{$vo.realnamepy}",tel:"{$vo.mobile}",uid: "{$vo.uid}" },
            </volist>
        ];
        $('#keyword').autocomplete(data,{
            max: 12,    //列表里的条目数
            minChars: 0,    //自动完成激活之前填入的最小字符
            width: 400,     //提示的宽度，溢出隐藏
            scrollHeight: 300,   //提示的高度，溢出显示滚动条
            matchContains: true,    //包含匹配，就是data参数里的数据，是否只要包含文本框里的数据就显示
            autoFill: false,    //自动填充
            formatItem: function(row, i, max) {
                return row.name+"["+row.tel+"]";
            },
            formatMatch: function(row, i, max) {
                return row.name+row.py+row.tel;
            },
            formatResult: function(row) {
                return row.name;
            }
        }).result(function(event, row, formatted) {
            $("#tempUserId").val(row.uid);
        });
        $("#sureSelectUser").click(function(){
            if($.trim($("#tempUserId").val())!=""){
                $("#AddLiveUserName").html($("#AddLiveUserName").text()+$("#keyword").val()+",");
                $("#addLiveUsers").val($("#addLiveUsers").val()+$("#tempUserId").val()+",");
                $('#selectUserModal').modal('hide');
            }else{
                $("#keyword").attr("placeholder","请选择记者")
            }
        })

        $('#selectUserModal').on('hide.bs.modal', function (e) {
            $("#selectUserModal form").get(0).reset();
        })

        $('#addLiveApplyModal').on('hide.bs.modal', function (e) {
            $("#addLiveApplyModal form").get(0).reset();
            $("#AddLiveUserName").empty();

        })

        $('#datetimepicker1').datetimepicker({
            format: 'yyyy-mm-dd hh:ii',
            language:"zh-CN"
        });
        $('#datetimepicker2').datetimepicker({
            format: 'yyyy-mm-dd hh:ii',
            useCurrent: false,
            language:"zh-CN"
        });
        $("#datetimepicker1").on("dp.change", function (e) {
            $('#datetimepicker2').data("DateTimePicker").minDate(e.date);
        });
        $("#datetimepicker2").on("dp.change", function (e) {
            $('#datetimepicker1').data("DateTimePicker").maxDate(e.date);
        });


        $(".next").html("&raquo;");
        $(".prev").html("&laquo;");

        $(".sortUp").click(function(e){
            e.preventDefault();
            e.stopPropagation();

            var _this=this;
            var _that=$(_this).parents('li').prev().find('.sortUp');

           var thisId=$(_this).data('id');

            var thatId=_that.data('id');

            if(typeof thatId!='undefined' && typeof thisId!='undefined'){
                $.get('{:U("ajaxSetSort")}',{thisId:thisId,thatId:thatId},function(data){
                    if(data){
                        $(_this).parents('li').insertBefore(_that.parents('li'));
                    }
                })
            }
        })
    });
</script>
</body>

</html>